<template>
  <div class="inner">
    <div class="left">
      <div class="title">角色列表</div>
      <ul class="tree">
        <li v-for="item in roleList" :key="item.id" :class="{ active: item.id === isActive }" class="liStyle"
          @click="selRoleFn(item.id)">
          <span>{{ item.roleName }}</span>
          <el-dropdown v-if="$showFn(['role_edit', 'role_del'])" class="lang-select-dropdown" trigger="click"
            size="small">
            <i class="el-icon-more" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="color: rgb(0, 110, 255)" @click.native="edit(item)"
                v-has="'role_edit'">修改</el-dropdown-item>
              <el-dropdown-item style="color: red" @click.native="$delFn('角色', delBtn)"
                v-has="'role_del'">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
      <el-button class="addBtn" style="width: 100%;" @click="addrole" v-has="'role_add'">
        新增角色 <i class="el-icon-plus"></i>
      </el-button>
    </div>
    <div class="right">
      <div class="titleBtn">
        <el-button class="addBtn" :disabled="isActive === ''" width="100%" @click="addRoleMenuFn"
        v-has="'role_addper'">添加权限</el-button>
      </div>
      <div class="MenuList">
        <div class="treegroup">
          <div class="righttree">
            <el-tree show-checkbox class="tree" :includeHalfChecked="true" ref="operationstree" :data="menuList"
              node-key="id" :props="propsDefault"></el-tree>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增/修改弹窗 -->
    <el-dialog :close-on-click-modal="false" :title="dTitle" width="30%" :visible.sync="dialogFormVisible"
      @close="btnClose">
      <el-form ref="addForm" :model="roleFormData" :rules="addRules" label-width="80px" >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-clearEmoji v-model.trim="roleFormData.roleName" type="text" placeholder="请输入..."/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button class="celBtn" @click="btnClose">取 消</el-button>
        <el-button class="addBtn" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import refreshRoutes from "@/utils/asyncRoutes";
import { getDictValueAndNameSource } from "@/api/dictionary";
import {
  getRoleList,
  addRole,
  updateRole,
  delRole,
  selRoleByMenu,
  addRoleMenu,
} from "@/api/system";
export default {
  name: "RoleInfo",
  data() {
    return {
      idList: ["GoodsCategoryAddId", "GoodsUnitAddId"],
      lists: [
        {
          menuName: "GoodsInfo",
          id: "GoodsInfoId",
          children: [
            {
              menuName: "GoodsCategory",
              id: "GoodsCategoryId",
              children: [
                {
                  menuName: "GoodsCategoryAdd",
                  id: "GoodsCategoryAddId",
                },
                {
                  menuName: "GoodsCategoryEdit",
                  id: "GoodsCategoryEditId",
                },
              ],
            },
            {
              menuName: "GoodsUnit",
              id: "GoodsUnitId",
              children: [
                {
                  menuName: "GoodsUnitAdd",
                  id: "GoodsUnitAddId",
                },
              ],
            },
          ],
        },
      ],
      checkAll: [],
      isActive: "",
      dTitle: "添加角色",
      dialogFormVisible: false,
      delDialogVisible: false,
      roleList: [],
      roleFormData: {
        roleName: "",
        bySystem: "0",
      },
      addRules: {
        roleName: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "change",
          },
          {
            // required: true,
            min: 0,
            max: 10,
            message: "长度为1-10个字符",
            trigger: "change",
          },
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: "只能输入中文",
            trigger: "change",
          },
        ],
      },
      menuList: [],
      activeNames: [],
      menuIdList: [],
      mennId: "0",
      propsDefault: {
        children: "children",
        label: "menuName",
      },
    };
  },
  watch: {
    menuList: {
      handler(newVal, oldVal) {
        newVal.forEach((item) => {
          if (item.children?.length > 0) {
            const flag = item.children.every((i) => {
              return i.purview === "1";
            });
            if (flag) {
              item.purview = "1";
            } else {
              item.purview = "0";
            }
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getRoleList();
  },
  methods: {
    async getRoleList() {
      const res = await getRoleList();
      if (res.code === 200) {
        const data = res.data;
        // this.noCategoryCount = data.count
        // console.log(data);
        this.roleList = data.sysRoles;
        this.menuList = data.menuList;
        this.menuList.forEach((item) => {
          this.activeNames.push(item.id);
          this.checkAll.push("0");
        });
        // console.log('count', this.noCategoryCount)
      } else {
        // this.$message.error(res.message);
      }
    },
    addrole() {
      this.roleFormData.bySystem = this.mennId;
      this.dialogFormVisible = true;
      this.dTitle = "添加角色";
    },
    async selRoleFn(id) {
      this.isActive = id;
      this.idList = [];
      const res = await selRoleByMenu({ id: id });
      console.log(res);
      if (res.code === 200) {
        const data = res.data;
        this.menuList = data.menuList;
        console.log(data, "角色信息");
        this.menuList.forEach((item1) => {
          // if (item1.purview === "1") {
          //   // this.idList.push(item1.id);
          // }
          item1.children.forEach((item2) => {
            if (item2.purview === "1" && item2.children.length === 0) {
              this.idList.push(item2.id);
            }
            item2.children.forEach((item3) => {
              if (item3.purview === "1") {
                this.idList.push(item3.id);
              }
            });
          });
        });
        this.$refs.operationstree.setCheckedKeys(this.idList, true);
      }
    },
    edit(row) {
      // console.log(id)
      this.roleFormData.bySystem = this.mennId;
      this.dTitle = "修改角色";
      this.roleFormData.roleName = row.roleName;
      this.dialogFormVisible = true;
    },
    btnClose() {
      this.$refs.addForm.resetFields();
      this.roleFormData.roleName = "";
      this.dialogFormVisible = false;
    },
    btnOk() {
      this.$refs.addForm.validate(async (isOk) => {
        if (isOk) {
          if (this.dTitle === "添加角色") {
            const res = await addRole(this.roleFormData);
            console.log(res);
            if (res.code === 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.getRoleList();
            } else {
              // this.$message.error(res.message);
              this.dialogFormVisible = false;
            }
          } else if (this.dTitle === "修改角色") {
            // console.log()
            const res = await updateRole({
              ...this.roleFormData,
              id: this.isActive,
            });
            console.log("修改", res);
            if (res.code === 200) {
              this.$message.success("修改成功");
              this.dialogFormVisible = false;
              this.getRoleList();
            } else {
              // this.$message.error(res.message);
              this.dialogFormVisible = false;
            }
          }
          this.roleFormData.roleName = "";
        } else {
          this.$message.warning("请检查输入信息");
        }
      });
    },
    async delBtn() {
      console.log(this.isActive);
      const res = await delRole({ id: this.isActive });
      if (res.code === 200) {
        this.$message.success("删除成功");
        this.delDialogVisible = false;
        this.getRoleList();
      } else {
        // this.$message.error(res.message);
        this.delDialogVisible = false;
      }
    },
    async addRoleMenuFn() {
      const arr = this.$refs.operationstree.getHalfCheckedKeys();
      const arr1 = this.$refs.operationstree.getCheckedKeys();
      // console.log(arr, "arr", arr1, "arr1");

      // return;
      this.menuIdList = [];
      this.menuIdList = [...arr, ...arr1];
      console.log(this.menuIdList);
      const data1 = {
        menuIdList: this.menuIdList,
        roleId: this.isActive,
      };
      // return;
      const res = await addRoleMenu(data1);
      if (res.code === 200) {
        this.$message.success("添加成功");
        refreshRoutes();
        // this.dialogFormVisible = false
        // this.getRoleList()
      } else {
        // this.$message.error(res.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.inner {
  display: flex;
  height: 100%;

  .left {
    width: 304px;
    padding: 32px;
    height: 100%;
    border-right: 1px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      text-align: center;
      // margin-bottom: 20px;
      font-size: 20px;
      font-weight: 600;
    }
    .tree {
      flex: 1;
      list-style: none;
      width: 100%;
      height: 820px;
      padding: 0 0 20px;
      overflow-y: auto;
      overflow-x: hidden;
      .liStyle {
        width: 240px;
        padding: 0 20px;
        cursor: pointer;
        list-style-type: none;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
      }

      .active {
        color: blue;
      }
    }
  }

  .right {
    .titleBtn{
      padding-left: 16px;
    }
    padding: 32px 32px 32px 16px;
    height: 100%;
    width: 100%;
    overflow-y: auto;
  }
}
::v-deep .el-tree>.el-tree-node:after {
  border-top: none;
}

::v-deep .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 16px;
}

.tree ::v-deep .el-tree-node__children {
  padding-left: 16px;
}

.tree ::v-deep .el-tree-node :last-child:before {
  height: 38px;
}

.tree ::v-deep .el-tree>.el-tree-node:before {
  border-left: none;
}

.tree-container ::v-deep .el-tree>.el-tree-node:after {
  border-top: none;
}

.tree ::v-deep .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree ::v-deep .el-tree-node__children .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 2px;
}

.tree ::v-deep .el-tree-node__children .el-tree-node:before {
  border-left: 2px dashed #91ccff;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree ::v-deep .el-tree-node:after {
  border-top: 2px dashed #91ccff;
  height: 35px;
  top: 10px;
  width: 24px;
}

::v-deep .el-tree-node__children .is-checked .el-tree-node__label {
  flex: 1;
  background-color: #58b4ff;
  border: none;
  color: #fff;
  height: 25px;
  line-height: 25px;
  padding-left: 10px;
}

::v-deep .el-tree-node__children .el-tree-node__label {
  flex: 1;
  background-color: rgb(248, 250, 252);
  color: #000;
  border: 2px dashed #91ccff;
  height: 25px;
  line-height: 25px;
  padding-left: 10px;
}

::v-deep .el-tree-node__content {
  margin-bottom: 8px;
}

::v-deep .el-tree-node__children .el-tree-node__content {
  margin-left: 5px;
}

::v-deep .el-tree-node__children .el-tree-node__content {
  padding-left: 0 !important;
}

::v-deep .collapse-title {
  /* padding-left: 20px; */
  flex: 1 0 90%;
  order: 1;

  ::v-deep .el-collapse-item__header {
    flex: 1 0 auto;
    order: -1;
  }
}

::v-deep .el-collapse-item__arrow {
  margin-left: 10px;
}

</style>
